<template>
  <div id="write" v-title :data-title="title">
    <el-container>
      <base-header :simple=true>
        <el-col :span="4" :offset="2">
          <div class="me-write-info">写文章</div>
        </el-col>
        <el-col :span="4" :offset="6">
          <div class="me-write-btn">
            <el-button round @click="publishShow">发布</el-button>
            <el-button round @click="cancel">取消</el-button>
          </div>
        </el-col>
      </base-header>

      <el-container class="me-area me-write-box">
        <el-main class="me-write-main">
          <div class="me-write-title">
            <el-input resize="none"
                      type="textarea"
                      autosize
                      v-model="articleForm.title"
                      placeholder="请输入标题"
                      class="me-write-input">
            </el-input>

          </div>
          <div id="placeholder" style="visibility: hidden;height: 89px;display: none;"></div>
          <markdown-editor :editor="articleForm.editor" class="me-write-editor"></markdown-editor>
        </el-main>
      </el-container>

      <el-dialog title="摘要 分类 标签"
                 :visible.sync="publishVisible"
                 :close-on-click-modal=false
                 custom-class="me-dialog">

        <el-form :model="articleForm" ref="articleForm" :rules="rules">
          <el-form-item prop="summary">
            <el-input type="textarea"
                      v-model="articleForm.summary"
                      :rows="6"
                      placeholder="请输入摘要">
            </el-input>
          </el-form-item>
          <el-form-item label="文章分类" prop="category">
            <el-select v-model="articleForm.category" value-key="id" placeholder="请选择文章分类">
              <el-option v-for="c in categorys" :key="c.id" :label="c.typeName" :value="c"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="文章标签" prop="tags">
            <el-checkbox-group v-model="articleForm.tags">
              <el-checkbox v-for="t in tags" :key="t.id" :label="t.id" name="tags">{{t.tagName}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="publishVisible = false">取 消</el-button>
          <el-button type="primary" @click="publish('articleForm')">发布</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
  import BaseHeader from '@/views/BaseHeader'
  import MarkdownEditor from '@/components/markdown/MarkdownEditor'
  import {publishArticle, getArticleById} from '@/api/article'
  import {getAllCategorys} from '@/api/category'
  import {getAllTags} from '@/api/tag'

  export default {
    name: 'BlogWrite',
    mounted() {
      // console.log("this.$route.params.id : " , this.$route.params.id)
      // if(this.$route.params.id){
      //   console.log("调用getArticleById方法")
      //   this.getArticleById(this.$route.params.id)
      // }

      // 获取所有标签和类型
      this.getCategorysAndTags()
      this.editorToolBarToFixedWrapper = this.$_.throttle(this.editorToolBarToFixed, 200)

      // 页面滚动
      window.addEventListener('scroll', this.editorToolBarToFixedWrapper, false);
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.editorToolBarToFixedWrapper, false)
    },
    data() {
      return {
        publishVisible: false,
        categorys: [],
        tags: [],
        articleForm: {
          id: '',
          title: '',
          summary: '',
          category: '',
          tags: [],
          editor: {
            value: '',
            ref: '',//保存mavonEditor实例  实际不该这样
            default_open: 'edit',
            toolbars: {
              bold: true, // 粗体
              italic: true, // 斜体
              header: true, // 标题
              underline: true, // 下划线
              strikethrough: true, // 中划线
              mark: true, // 标记
              superscript: true, // 上角标
              subscript: true, // 下角标
              quote: true, // 引用
              ol: true, // 有序列表
              ul: true, // 无序列表
              // imagelink: true, // 图片链接
              code: true, // code
              fullscreen: true, // 全屏编辑
              readmodel: true, // 沉浸式阅读
              help: true, // 帮助
              undo: true, // 上一步
              redo: true, // 下一步
              trash: true, // 清空
              navigation: true, // 导航目录
              //subfield: true, // 单双栏模式
              preview: true, // 预览
            }
          }
        },
        rules: {
          summary: [
            {required: true, message: '请输入摘要', trigger: 'blur'},
            {max: 80, message: '不能大于80个字符', trigger: 'blur'}
          ],
          category: [
            {required: true, message: '请选择文章分类', trigger: 'change'}
          ],
          tags: [
            {type: 'array', required: true, message: '请选择标签', trigger: 'change'}
          ]
        }
      }
    },
    computed: {
      title (){
        return '写文章 - 简易论坛'
		}
	},
    methods: {
      /**
       * 通过文章id获取文章
       */
      // getArticleById(id) {
      //   let that = this

      //   getArticleById(id)
      //   .then(data => {

      //     Object.assign(that.articleForm, data.data)
      //     that.articleForm.editor.value = data.data.body.content

      //     let tags = this.articleForm.tags.map(function (item) {
      //       return item.id;
      //     })

      //     this.articleForm.tags = tags

      //   }).catch(error => {
      //     if (error !== 'error') {
      //       that.$message({
      //         type: 'error', 
      //         message: '文章加载失败', 
      //         showClose: true
      //       })
      //     }
      //   })
      // },

      /**
       * 校验文章内容
       *  */ 
      publishShow() {
        if (!this.articleForm.title) {
          this.$message({
            message: '标题不能为空哦', 
            type: 'warning', 
            showClose: true
          })
          return
        }

        if (this.articleForm.title.length > 30) {
          this.$message({
            message: '标题不能大于30个字符', 
            type: 'warning', 
            showClose: true
          })
          return
        }

        if (!this.articleForm.editor.ref.d_render) {
          this.$message({
            message: '内容不能为空哦', 
            type: 'warning', 
            showClose: true
          })
          return
        }

        this.publishVisible = true;
      },

      /**
       * 发布
       */
      publish(articleForm) {
        let that = this

        this.$refs[articleForm].validate((valid) => {
          if (valid) {

            // 将map()方法返回一个由原数组的每个元素调用一个指定方法后返回值组成的新数组。
            // 这个就是选择的tags的id集合
            let tags = this.articleForm.tags.map(function (item) {
              // console.log("item : " , item)
              return {id: item};
            });

            // console.log("category是category整个类对象" , this.articleForm.category)
            let article = {
              // 当前用户的id
              id: this.$store.state.id,
              articleTitle: this.articleForm.title,
              articleDescription: this.articleForm.summary,
              type: this.articleForm.category,
              tags: tags,
              articleContent: this.articleForm.editor.value,
              articleContentHtml: this.articleForm.editor.ref.d_render
            }

            // console.log("发布的文章 : " , article)

            this.publishVisible = false;

            let loading = this.$loading({
              lock: true,
              text: '发布中，请稍后...'
            })

            publishArticle(article , this.$store.state.token)
            .then((data) => {
              if( data.success ){
                loading.close();
                that.$message({
                  message: '发布成功啦', 
                  type: 'success', 
                  showClose: true
                })
                that.$router.push({path: `/view/${data.id}`})
              }else{
                that.$message({
                  message: error, 
                  type: '发布文章失败:' + data.msg, 
                  showClose: true});
              }
            }).catch((error) => {
              loading.close();
              if (error !== 'error') {
                that.$message({
                  message: error, 
                  type: 'error', 
                  showClose: true
                });
              }
            })

          } else {
            return false;
          }
        });
      },

      /**
       * 写文章取消
       */
      cancel() {
        this.$confirm('文章将不会保存, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push('/')
        })
      },

      /**
       * 获取所有的文章分类和标签
       */
      getCategorysAndTags() {
        let that = this

        getAllCategorys()
        .then(data => {
          if(data.success){
            that.categorys = data.data
          }else{
             that.$message({
               type: 'error', 
               message: '文章分类加载失败', 
               showClose: true
             })
          }
        }).catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error', 
              message: '文章分类加载失败', 
              showClose: true
            })
          }
        })

        // 获取所有文章标签
        getAllTags()
        .then(data => {
          if(data.success){
            that.tags = data.data
          }else{
             that.$message({
               type: 'error', 
               message: '标签加载失败', 
               showClose: true
             })
          }
        }).catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error', 
              message: '标签加载失败', 
              showClose: true
            })
          }
        })

      },

      /**
       * 编辑器的属性保存
       */
      editorToolBarToFixed() {
        let toolbar = document.querySelector('.v-note-op');
        let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
        if (curHeight >= 160) {
          document.getElementById("placeholder").style.display = "block"; //bad  用计算属性较好
          toolbar.classList.add("me-write-toolbar-fixed");
        } else {
          document.getElementById("placeholder").style.display = "none";
          toolbar.classList.remove("me-write-toolbar-fixed");
        }
      }
    },

    components: {
      'base-header': BaseHeader,
      'markdown-editor': MarkdownEditor
    },

    //组件内的守卫 调整body的背景色
    beforeRouteEnter(to, from, next) {
      window.document.body.style.backgroundColor = '#fff';
      next();
    },
    beforeRouteLeave(to, from, next) {
      window.document.body.style.backgroundColor = '#f5f5f5';
      next();
    }
  }
</script>

<style>
  .el-header {
    position: fixed;
    z-index: 1024;
    min-width: 100%;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
  }

  .me-write-info {
    line-height: 60px;
    font-size: 18px;
    font-weight: 600;
  }

  .me-write-btn {
    margin-top: 10px;
  }

  .me-write-box {
    max-width: 700px;
    margin: 80px auto 0;
  }

  .me-write-main {
    padding: 0;
  }

  /* .me-write-title {
  } */

  .me-write-input textarea {
    font-size: 32px;
    font-weight: 600;
    height: 20px;
    border: none;
  }

  .me-write-editor {
    min-height: 650px !important;
  }

  .me-header-left {
    margin-top: 10px;
  }

  .me-title img {
    max-height: 2.4rem;
    max-width: 100%;
  }

  .me-write-toolbar-fixed {
    position: fixed;
    width: 700px !important;
    top: 60px;
  }

  .v-note-op {
    box-shadow: none !important;
  }

  .auto-textarea-input, .auto-textarea-block {
    font-size: 18px !important;
  }
</style>
